import Scroll from '../Scroll/Scroll'
import {
  computed,
  h,
  mergeProps,
  ref,
  renderSlot,
  watch,
  withCtx,
  nextTick
} from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'ScrollContainer',
  props: Scroll.props,
  emits: Scroll.emits,
  render(ctx) {
    return h(
      Scroll,
      mergeProps(
        ctx.$props,
        {
          onScroll: e => {
            ctx.$emit('scroll', e)
          }
        },
        {
          ref: 'scrollRef'
        }
      ),
      {
        default: withCtx(() => {
          return [renderSlot(ctx.$slots, 'default')]
        })
      }
    )
  },
  setup() {
    const scrollRef = ref(null)
    const { state } = useStore()

    const playList = computed(() => {
      return state.play.playList
    })

    const scrollIntance = computed(() => {
      return scrollRef.value.scroll
    })

    watch(playList, async () => {
      await nextTick() // 数据变化到 dom 变化有时间差
      scrollRef.value.scroll.refresh()
    })

    return {
      scrollRef,
      scroll: scrollIntance // 利用计算属性延时
    }
  }
}
